<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script src="js/event.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
<!-- IE的事件流是 ------  事件冒泡流   -->
<!-- 其他的事件流是 -----  事件捕获流   -->
<!--
  -- 事件冒泡：即事件最开始由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上传播至最不具体的那个节点(稳定)。
  -- 事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
  --
  --
-->
<!--
  -- 使用事件处理程序
  -- 1.HTML事件处理程序:它的缺点：HTML和JS代码紧密的耦合在一起；
  -- 2.DOM 0级事件处理程序：较传统的方式：把一个函数赋值给一个事件的处理程序属性(用的比较多)，特点：简单，跨浏览器的优势;
  -- 3.DOM 2级事件处理程序：
  --   DOM 2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作
  --   addEventListener() 和 removeEventListener()
  --   接收三个参数：要处理的事件名;作为世界处理程序的函数;布尔值(true是指在事件捕获阶段执行，false指的是在事件冒泡阶段执行)
  -- DOM 0级和 DOM 2级都可以给目标添加多个事件处理程序，按照定义顺序执行
  -- IE:
  -- IE 事件处理程序: attachEvent()添加事件 和 detachEvent() 删除事件，
  -- 接收相同的两个参数：事件处理程序的名称和事件处理程序的函数
  -- 跨浏览器的事件处理程序
-->
<div id="box">
    <input type="button" value="按钮" id="btn">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
    <a href="event.html" id="go">跳转</a>
</div>
<script>
    // function showMessage(e) {
    //     alert('Hello World!')
    //     e.stopPropagation()
    // }
    // function showBox() {
    //     alert('这是放input按钮的盒子')
    // }
    // DOM 0级的事件处理程序
    // let btn2 = document.getElementById('btn2');
    // let box = document.getElementById('box');
    // 给 btn2 添加 onclick属性
    // btn2.onclick = function() {
    //     alert('这是通过DOM 0级添加的事件!')
    // }
    // 删除 onclick属性 移除事件
    // btn2.onclick = null

    // 使用 DOM 2级的事件处理程序
    // let btn3 = document.getElementById('btn3');
    // btn3.addEventListener('click', DOM2, false);
    // btn3.addEventListener('click', function() {
    //     alert(this.value)
    // }, false)
    // function DOM2() {
    //     alert('这是DOM 2级事件处理程序! addEventListener() 和 removeEventListener()')
    // }
    // DOM 2级别，解除事件
    // btn3.removeEventListener('click', DOM2, false)

    // DOM 2级的事件处理：通过 addEventListener() 添加的事件，只能通过 removeEventListener() 来移除

    // 跨浏览器兼容写法

    // eventUtil.addHandler(btn2, 'click', showMessage)
    // eventUtil.addHandler(box, 'click', showBox)
    /*
    * 三、事件对象
    * 什么是事件对象？ 在触发DOM上的事件都会产生一个对象，
    * 事件对象event
    * 1.DOM中的事件对象
    * 1.1 type属性，用于获取事件类型
    * 1.2 target属性，用于获取事件目标
    * 1.3 stopPropagation()用于阻止事件冒泡
    * 1.4 preventDefault()方法，阻止事件的默认行为
    * IE中的事件对象
    * 1.1 type属性 用于获取事件类型
    * 1.2 srcElement属性 用于获取事件的目标
    * 1.3 cancelBubble属性，用户阻止事件冒泡
    *
    * */





</script>
</body>
</html>
